<template>
  <div class="register">
    <img
      src="@/assets/login.jpg"
      style="float: left; width: 100%; height: 100%; opacity: 0.9"
    />
    <div class="TRegister">
      <div class="registerTitle">在线考试系统注册页面</div>
      <div class="content">
        <!-- 注册页面 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="115px"
          class="demo-ruleForm"
          :inline="true"
        >
          <el-form-item
            label="身份选择："
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 35px;
              margin-left: -4px;
            "
          >
            <template>
              <el-radio v-model="ruleForm.role" label="1" border>教师</el-radio>
              <el-radio v-model="ruleForm.role" label="2" border>学生</el-radio>
            </template>
          </el-form-item>
          <el-form-item
            label="用户姓名："
            prop="username"
            style="margin-top: 10px"
          >
            <!-- autocomplete="off" 不会记录用户输入过的信息，保证安全性 -->
            <el-input
              class="slider"
              type="text"
              v-model="ruleForm.username"
              autocomplete="off"
              placeholder="请输入姓名"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="用户密码：" prop="password">
            <el-input
              class="slider"
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="请输入密码"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="checkPass">
            <el-input
              class="slider"
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              placeholder="请输入确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="this.ruleForm.role == '2'"
            label="班级选择："
            prop="selectclass"
            style="margin-left: 28px; dispaly: none"
          >
            <el-select
              v-model="ruleForm.selectclass"
              placeholder="请选择你的班级"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="operation">
            <el-button
              type="primary"
              class="submitButton"
              @click="registerForm('ruleForm')"
              >注册</el-button
            >
            <el-button
              type="info"
              class="submitButton"
              @click="resetForm('ruleForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchPost } from "@/axios";
export default {
  name: "register",
  data() {
    const password = (rule, value, callback) => {
      const passReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (passReg.test(value)) {
        callback(new Error("请输入6-18位数字或字母组合的密码"));
      } else {
        callback();
      }
    };
    const checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (this.ruleForm.password !== value) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      // radio: "教师",
      ruleForm: {
        username: "",
        password: "",
        checkPass: "",
        selectclass: "",
        role: "1",
      },
      options: [
        {
          value: "一班",
          label: "一班",
        },
        {
          value: "二班",
          label: "二班",
        },
        {
          value: "三班",
          label: "三班",
        },
      ],
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { validator: password, trigger: "blur" },
          {
            required: true,
            min: 6,
            max: 18,
            message: "请输入6-18位数字、字母组合的密码",
            trigger: "blur",
          },
        ],
        checkPass: [
          { validator: checkPass, trigger: "blur" },
          { required: true, trigger: "blur" },
        ],
        selectclass: [
          { required: true, message: "请选择班级", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    registerForm(formName) {
      this.$refs[formName].validate((valid) => {
        // if (valid) {
        //   this.$message.success('注册成功')
        //   this.$router.push({ path: '/login' })
        // } else {
        //   console.log('error submit!!')
        //   return false
        // }
        if (valid) {
          this.$api.Login.registerto(this.ruleForm).then((res) => {
            console.log(res);
            if(res.data.code == 200){
              this.$router.push('/login');
            }
          });
          // const result = fetchPost(`/api/user/register`,this.ruleForm);
          // if(result.code==200){
          //   this.$message.success("注册成功");
          // }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
body {
  margin: 0;
}
</style>

<style lang="scss" scoped>
//  封装组件颜色（全局）
$bgColor: rgba(41, 34, 34, 0.3);
$textColor: #131515;

.register {
  width: 100%;
  height: 100vh;
  // background: url("../assets/login/register.png");
  background-size: 100% 120%;

  .TRegister {
    width: 550px;
    position: absolute;
    top: 48%;
    left: 38%;
    transform: translateY(-55%);

    .registerTitle {
      color: $textColor;
      font-size: 28px;
      font-weight: 600;
      font-family: 华文楷体;
      letter-spacing: 8px;
      padding: 20px 20px;
      box-sizing: border-box;
    }

    .content {
      width: 100%;
      border-radius: 10px;
      margin: 0 auto;
      background-color: $bgColor;

      .el-form {
        padding: 20px 40px 30px;
        box-sizing: border-box;
        text-align: center;

        .el-form-item {
          .slider {
            width: 203px;
          }

          ::v-deep(.el-form-item__label) {
            font-size: 18px;
            font-weight: 600;
            font-family: 华文楷体;
            color: $textColor;
          }

          ::v-deep(.el-input__inner) {
            font-size: 14px;
            width: 234px;
            height: 36px;
            background: #ffffff;
          }

          /*  ::v-deep(.el-input__suffix) {
            font-size: 14px;
            margin-right: -25px;
          } */
          .el-radio {
            color: $textColor;
            border-color: #333;
          }
        }

        .operation {
          display: flex;
          justify-content: center;
          margin-top: 20px;

          .submitButton {
            margin-left: 40px;
            width: 83px;
          }
        }
      }
    }
  }
}
</style>
